<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start" (click)="gotohome()">
          <ion-icon name="arrow-back"></ion-icon>
      </ion-buttons>
    <ion-title>checkbox</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
   <h3>属性</h3>
   <div>
     <p>checked="true" (当为true时复选框为选中状态)</p>
    
        <ion-list>
            <ion-item>
              <ion-checkbox slot="start" checked="true"></ion-checkbox>
              <ion-label>篮球</ion-label>
            </ion-item>
            <ion-item>
              <ion-checkbox slot="start" checked="true"></ion-checkbox>
              <ion-label>足球</ion-label>
            </ion-item>
            <ion-item>
              <ion-checkbox slot="start"></ion-checkbox>
              <ion-label>羽毛球</ion-label>
            </ion-item>
          </ion-list>
  
   </div>
   <div>
      <p>color="primary" | "secondary" | "tertiary" ... (复选框的颜色)</p>
      
         <ion-list>
             <ion-item>
               <ion-checkbox slot="start" checked="true" color="primary"></ion-checkbox>
               <ion-label>篮球</ion-label>
             </ion-item>
             <ion-item>
               <ion-checkbox slot="start" checked="true" color="secondary"></ion-checkbox>
               <ion-label>足球</ion-label>
             </ion-item>
             <ion-item>
               <ion-checkbox slot="start" checked="true" color="tertiary"></ion-checkbox>
               <ion-label>羽毛球</ion-label>
             </ion-item>
           </ion-list>
      
    </div>
    <div>
        <p>disabled="true" (为true时无法点击复选框)</p>
        
           <ion-list>
               <ion-item>
                 <ion-checkbox slot="start" color="primary" disabled="true"></ion-checkbox>
                 <ion-label>篮球</ion-label>
               </ion-item>
               <ion-item>
                 <ion-checkbox slot="start" color="secondary"></ion-checkbox>
                 <ion-label>足球</ion-label>
               </ion-item>
               <ion-item>
                 <ion-checkbox slot="start" color="tertiary"></ion-checkbox>
                 <ion-label>羽毛球</ion-label>
               </ion-item>
             </ion-list>
        
      </div>
      <div>
          <p>mode="ios" | "md" (选择ios或者安卓风格)</p>
          
             <ion-list>
                 <ion-item>
                   <ion-checkbox slot="start" color="primary" mode="md"></ion-checkbox>
                   <ion-label>篮球</ion-label>
                 </ion-item>
                 <ion-item>
                   <ion-checkbox slot="start" color="secondary" mode="md"></ion-checkbox>
                   <ion-label>足球</ion-label>
                 </ion-item>
               </ion-list>
          
        </div>
        <h3>事件</h3>
        <div>
           <p>ionBlur (切换失去焦点时触发)</p>
           <p>ionChange (属性改变时触发)</p>
           <p>ionFocus (选中时触发)</p>
           <ion-list>
              <ion-item>
                <ion-checkbox slot="start" color="primary" (ionBlur)="BCheck()" (ionChange)="CCheck()" (ionFocus)="FCheck()"></ion-checkbox>
                <ion-label>篮球</ion-label>
              </ion-item>
              <ion-item>
                <ion-checkbox slot="start" color="secondary" (ionBlur)="BCheck()" (ionChange)="CCheck()" (ionFocus)="FCheck()"></ion-checkbox>
                <ion-label>足球</ion-label>
              </ion-item>
            </ion-list>
        </div>
</ion-content>
